<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏组件</title>
    <!-- 添加Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 添加 API 配置文件 -->
    <script src="/assets/js/api.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            min-height: 100vh;
            background-color: #f5f6fa;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* 防止水平滚动 */
        }

        /* 侧边栏样式 */
        .sidebar {
            width: 60px;
            background-color: #fff;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            position: fixed;
            height: 100vh;
            left: 0;
            top: 0;
            transition: width 0.3s ease;
            overflow: hidden;
            z-index: 1000;
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
        }

        .sidebar:hover {
            width: 180px;
        }

        .nav-links {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            padding: 0.5rem;
            height: 100%;
        }

        .nav-links a {
            color: #666;
            text-decoration: none;
            padding: 0.8rem;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            white-space: nowrap;
            width: 100%;
            border-radius: 8px;
            position: relative;
        }

        .nav-links a i {
            font-size: 1.2rem;
            min-width: 24px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .nav-links a span {
            margin-left: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
            font-size: 14px;
            display: none;
        }

        .sidebar:hover .nav-links a span {
            opacity: 1;
            display: block;
        }

        .nav-links a:hover {
            color: #4776E6;
            background-color: rgba(71, 118, 230, 0.1);
        }

        .nav-links a.active {
            color: #4776E6;
            background-color: rgba(71, 118, 230, 0.1);
        }

        .nav-links a.active i {
            transform: scale(1.1);
        }

        /* 检查更新按钮样式 */
        .nav-link.check-update {
            margin-top: auto;
            color: #4776E6;
            cursor: pointer;
        }

        .nav-link.check-update:hover {
            background-color: rgba(71, 118, 230, 0.15);
        }

        /* 添加检查更新图标的动画样式 */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .nav-link.checking-update i {
            animation: spin 1s linear infinite;
        }

        .nav-link.check-update i {
            transition: transform 0.3s ease;
        }

        .nav-link.check-update:hover i {
            transform: rotate(180deg);
        }

        /* 主内容区域样式 */
        #main-content {
            flex: 1;
            padding: 2rem;
            margin-left: 60px;
            width: calc(100% - 60px);
            min-height: 100vh;
            transition: all 0.3s ease;
            opacity: 1;
            transform: translateX(0);
            position: relative;
            overflow-x: hidden;
        }

        #main-content.fade-out {
            opacity: 0;
            transform: translateX(20px);
        }

        #main-content.fade-in {
            opacity: 1;
            transform: translateX(0);
        }

        .sidebar:hover + #main-content {
            margin-left: 180px;
            width: calc(100% - 180px);
        }

        /* 添加滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding-bottom: 60px; /* 为底部导航栏留出空间 */
            }

            .sidebar {
                width: 100%;
                height: 60px;
                position: fixed;
                bottom: 0;
                top: auto;
                padding: 0;
                box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            }

            .sidebar:hover {
                width: 100%;
                height: 60px;
            }

            .nav-links {
                flex-direction: row;
                justify-content: space-around;
                height: 100%;
                padding: 0;
            }

            .nav-links a {
                flex-direction: column;
                padding: 0.5rem;
                justify-content: center;
                text-align: center;
            }

            .nav-links a i {
                min-width: auto;
                margin-bottom: 4px;
                font-size: 1.1rem;
            }

            .nav-links a span {
                font-size: 0.7rem;
                opacity: 1;
                margin-left: 0;
            }

            #main-content {
                margin-left: 0;
                margin-bottom: 60px;
                width: 100%;
                padding: 1rem;
                min-height: calc(100vh - 60px);
            }

            .sidebar:hover + #main-content {
                margin-left: 0;
                width: 100%;
            }
        }

        /* 添加更新对话框样式 */
        .update-dialog {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 24px;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
            z-index: 1001;
            width: 90%;
            max-width: 400px;
        }

        .update-dialog.show {
            display: block;
        }

        .update-dialog h3 {
            margin-bottom: 16px;
            font-size: 18px;
            color: #2d3436;
        }

        .update-info {
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.6;
            color: #4a5568;
            max-height: 200px;
            overflow-y: auto;
        }

        .update-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .update-button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .update-now {
            background: #4776E6;
            color: white;
        }

        .update-later {
            background: #e2e8f0;
            color: #4a5568;
        }

        .update-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 添加消息提示样式 */
        .message-box {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 24px;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .message-success {
            background-color: #10b981;
        }

        .message-error {
            background-color: #ef4444;
        }

        .message-info {
            background-color: #3b82f6;
        }

        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 添加遮罩层样式 */
        .dialog-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .dialog-overlay.show {
            display: block;
        }

        /* 强制更新样式 */
        .dialog-overlay.force-update {
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(4px);
        }

        .update-dialog.force-update {
            background: linear-gradient(to bottom, #ffffff, #f8f9fa);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .update-notice {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 8px;
            margin-bottom: 20px;
            color: #ef4444;
        }

        .update-notice i {
            font-size: 18px;
        }

        .update-dialog.force-update .update-button {
            width: 100%;
            padding: 12px;
            background: #4776E6;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 16px;
        }

        .update-dialog.force-update .update-button:hover {
            background: #3461c1;
        }

        .update-dialog.force-update .update-info {
            background: rgba(71, 118, 230, 0.05);
            padding: 16px;
            border-radius: 8px;
            margin: 16px 0;
        }
    </style>
</head>
<body>
    <nav class="sidebar">
        <div class="nav-links">
            <a href="#" class="nav-link" data-page="main_page">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
       
            <a href="#" class="nav-link" data-page="profile">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
            <a href="#" class="nav-link" data-page="about">
                <i class="fas fa-info-circle"></i>
                <span>关于我们</span>
            </a>
        </div>
    </nav>

    <div id="main-content">
        <!-- 动态内容将在这里加载 -->
    </div>

    <script>
        // 加载页面内容的函数
        async function loadPage(pageName, updateUrl = true) {
            try {
                console.log('开始加载页面:', pageName);
                
                // 添加淡出动画
                const mainContent = document.getElementById('main-content');
                mainContent.classList.add('fade-out');

                // 更新激活状态
                document.querySelectorAll('.nav-links a').forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('data-page') === pageName) {
                        link.classList.add('active');
                    }
                });

                // 等待淡出动画完成
                await new Promise(resolve => setTimeout(resolve, 300));

                console.log('发起页面请求:', `/pages/${pageName}`);
                const response = await fetch(`/pages/${pageName}`);
                if (!response.ok) {
                    throw new Error(`加载页面失败: ${response.status} ${response.statusText}`);
                }
                const content = await response.text();
                console.log('页面内容获取成功');
                
                // 创建一个临时容器来解析HTML
                const temp = document.createElement('div');
                temp.innerHTML = content;
                
                // 提取所有脚本
                const scripts = Array.from(temp.getElementsByTagName('script'));
                
                // 清除脚本标签，以防止重复
                scripts.forEach(script => script.remove());
                
                // 更新内容
                mainContent.innerHTML = temp.innerHTML;
                console.log('页面内容已更新到DOM');
                
                // 重新执行脚本
                for (const script of scripts) {
                    const newScript = document.createElement('script');
                    Array.from(script.attributes).forEach(attr => {
                        newScript.setAttribute(attr.name, attr.value);
                    });
                    newScript.textContent = script.textContent;
                    await new Promise((resolve) => {
                        newScript.onload = resolve;
                        mainContent.appendChild(newScript);
                        if (!newScript.src) {
                            resolve();
                        }
                    });
                }
                console.log('脚本重新执行完成');

                // 根据页面类型调用相应的初始化函数
                switch (pageName) {
                    case 'main_page':
                        if (typeof window.initializeMainPage === 'function') {
                            window.initializeMainPage();
                            console.log('main_page初始化函数已调用');
                        }
                        break;
                    case 'profile':
                        if (typeof window.initializeProfile === 'function') {
                            window.initializeProfile();
                            console.log('profile初始化函数已调用');
                        }
                        break;
                }
                
                // 只有在需要时才更新URL
                if (updateUrl) {
                    window.history.pushState({ page: pageName }, '', `/pages/${pageName}`);
                }

                // 添加淡入动画
                mainContent.classList.remove('fade-out');
                mainContent.classList.add('fade-in');
                
                // 清除淡入动画类
                setTimeout(() => {
                    mainContent.classList.remove('fade-in');
                }, 300);

            } catch (error) {
                console.error('加载页面失败:', error);
                const errorMessage = `
                    <div style="
                        padding: 20px;
                        margin: 20px;
                        border-radius: 8px;
                        background-color: #fee2e2;
                        border: 1px solid #ef4444;
                        color: #dc2626;
                    ">
                        <h3 style="margin-bottom: 10px;">页面加载失败</h3>
                        <p>错误信息: ${error.message}</p>
                        <p style="margin-top: 10px; font-size: 0.9em;">
                            请检查以下内容：
                            <ul style="margin-top: 5px; margin-left: 20px;">
                                <li>页面文件 ${pageName}.html 是否存在</li>
                                <li>服务器是否正常运行</li>
                                <li>网络连接是否正常</li>
                            </ul>
                        </p>
                    </div>
                `;
                document.getElementById('main-content').innerHTML = errorMessage;
                mainContent.classList.remove('fade-out');
            }
        }

        // 初始化页面
        function initializePage() {
            // 如果是从登录页面来的，强制加载 main_page
            if (sessionStorage.getItem('from_login') === 'true') {
                sessionStorage.removeItem('from_login');
                loadPage('main_page', false);
                return;
            }
            
            // 如果URL中没有指定页面，默认加载main_page
            const path = window.location.pathname;
            const pageName = path.includes('/pages/') 
                ? path.split('/').pop().replace('.html', '')
                : 'main_page';
            loadPage(pageName, false);
        }

        // 设置导航点击事件
        document.querySelectorAll('.nav-links a[data-page]').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const pageName = e.target.closest('a').getAttribute('data-page');
                loadPage(pageName);
            });
        });

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            initializePage();
        });

        // 处理浏览器的后退/前进按钮
        window.onpopstate = function(event) {
            const path = window.location.pathname;
            const pageName = path.split('/').pop() || 'main_page';
            loadPage(pageName, false);
        };
    </script>
</body>
</html>
